<template>
  <div class="sdy-home-goods-list">
    <!-- 使用 vant 内的 List 组件 -->
    <!-- 如果需要下拉刷新，包裹该标签 -->
    <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
      <van-list
        class="goods-list-box"
        v-model:loading="loading"
        :finished="finished"
        finished-text="没有更多了"
        :offset="100"
        @load="loadGoodsListHandler"
      >
        <div 
          class="goods-item" 
          v-for="item in goodsList" 
          :key="item.proid">
          <img :src="item.img1" alt="">
          <p class="title van-multi-ellipsis--12">
            {{ item.proname }}
          </p>
          <p class="price">
            <span class="current">
              ￥ {{ item.issale ? (item.originprice * 10 / item.discount).toFixed(2) : item.originprice.toFixed(2) }}
            </span>
            <span class="old">
              ￥ {{ item.originprice.toFixed(2) }}
            </span>
          </p>
          <p class="tags">
            <van-tag type="danger">{{ item.category }}</van-tag>
            <van-tag type="primary">{{ item.brand }}</van-tag>
          </p>
        </div>
      </van-list>
    </van-pull-refresh>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue'
// 导入请求相关接口
import { goodsListApi } from '@/api/goods'
// 导入 ts 相关接口
import type { MyHotItem } from '@/config/interface'

// 准备列表控制变量
// 当你需要加载的时候，直接加载即可，不需要操作该数据
// 加载数据的时候，会自动把 loading 设置为 true
// 当你加载完毕以后，把 loading 修改为 false 即可
const loading = ref<boolean>(false)
// 当你没有更多数据的时候，把该数据的值变成 true，不会再次加载了
const finished = ref<boolean>(false)
// 添加一个节流阀
const flag = ref<boolean>(true)
// 准备一个变量，表示 下拉刷新控制器
const refreshing = ref<boolean>(false)

// 准备一个变量，存储 商品列表数据
const goodsList = ref<MyHotItem[]>([])

// 准备一个数据表示请求相关信息
const goodsInfo = reactive({ count: 1, limitNum: 10 })

// 滚动到底部的时候触发的事件
const loadGoodsListHandler = async () => {
  /* console.log('需要加载更多数据了');
  
  setTimeout(() => {
    loading.value = true
    finished.value = true
  },3000) */
  setTimeout(async () => {
    const res = await goodsListApi(goodsInfo)
    console.log(res)
    // 注意：不能直接替换数组，而是要把本次的内容拼接在上一次的内容后面
    goodsList.value = [ ...goodsList.value, ...res.data ]
    // 修改一下 goodsInfo 内的 count，为了下次加载的时候可以变成第二页
    goodsInfo.count++
    // 把加载完毕的状态修改为 false
    loading.value = false
    // 开启开关
    flag.value = true
    // 判断一下，如果 res.data 的 length 为 空，那么不需要再次 loading 了
    if (!res.data.length) finished.value = true 
  }, Math.random() * 1000 + 2000)
}

// 下拉刷新的时候执行的代码
const onRefresh = () => {
  setTimeout(async () => {
    // 让当前页变成第一页(模拟一个 2 - 7 的随机数)
    // 注意：不应该依赖前端变化，依赖后端变化
    goodsInfo.count = Math.floor(Math.random() * 5 + 2)
    // 请求数据
    const res = await goodsListApi(goodsInfo)
    // 本次需要完整替换
    goodsList.value = res.data
    // 让当前页++
    goodsInfo.count++
    // 让下拉刷新前控制变量换成 false
    refreshing.value = false
  }, Math.random() * 1000 + 2000)
}
</script>

<style scoped lang="scss">
@import '@/styles/variable.scss';
.sdy-home-goods-list{
  box-sizing: border-box;
  padding: 0 15px;

  .goods-list-box {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;

    .goods-item{
      width: 45%;
      border: 1px solid #333;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 5px;
      overflow: hidden;
      padding-bottom: 5px;

      >p {
        margin: 0;
      }

      > img {
        width: 100%;
        height: 170px;
        display: block;
      }

      > .title {
        font-size: 12px;
      }

      > .price {
        font-size: 16px;
        color: #ccc;
        width: 100%;
        display: flex;
        justify-content: space-evenly;

        > .current {
          font-size: 16px;
          color: $globalColor;
        }

        > .old {
          text-decoration: line-through;
        }
      }

      > .tags {
        width: 100%;
        display: flex;
        justify-content: space-evenly;
      }
    }
  }
}
</style>